<template>
  <div class="timeReport" :style="styleObj">
    <div class="head container">
      <el-select
        class="select"
        style="width: 30%"
        v-model="formData.id"
        placeholder="请选择报表"
        @change="reportSelect($event)"
      >
        <el-option
          v-for="(item, index) in ReportList"
          :label="item.name"
          :value="item.id"
          :key="index"
        ></el-option>
      </el-select>
    </div>
    <timeReport
      :body="body"
      :key="myKey"
      :header="header"
      :loadingShow="loadingShow"
      :tableHeight="styleObj.tableHeight"
      :getBodyData="getBodyData"
      :bodyConfigList="bodyConfigList"
      :getCellClassName="getCellClassName"
      :isShow="value"
    ></timeReport>
  </div>
</template>
<script>
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
import { mySession } from "@/utils/localStorage";
import { tableMixins } from "./mixin/index";
import timeReport from "@/components/Topology/timeReport.vue";
export default {
  name: "widgetTimeReport2",
  components: {
    timeReport,
  },
  mixins: [tableMixins],
  //此处存放数据
  props: {
    value: Object,
    ispreview: Boolean,
    widgetIndex: Number,
    pageId: String,
    componentsID: String,
  },
  data() {
    return {
      loadingShow: false, //加载表格数据
      body: [],
      header: [],
      bodyConfigList: [],
      mySpecialId: "",
      optionsData: {},
      optionsSetup: {},
      formData: {
        dataId: "",
        dataSetNameId: "",
      },
      getBodyData: false,
      myKey: 4000,
      tableHeight: 300,
      ReportList: [],
      const_id: "",
    };
  },
  //计算属性
  computed: {},
  //监听data中数据变化
  watch: {
    value: {
      handler(val) {
        this.options = val;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.setOptionsData(val);
      },
      deep: true,
    },
  },
  //方法集合
  methods: {
    initWidgetKey() {
      this.myKey = 4000 + Math.trunc(Math.random() * 1000);
    },
    handleCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.title == "") {
        return { color: "#299cfa", fontWeight: "bold" };
      }
    },
    getCellClassName({ row, column, rowIndex, columnIndex }) {
      // console.log(this.optionsSetup.alarmColor);
      if (this.optionsSetup.alarmColor) {
        if (columnIndex != 0) {
          const cellValue = row[columnIndex];
          if (cellValue !== 0) {
            return "GJ1";
          } else {
            return "";
          }
        }
      }
    },
    reportSelect(val) {
      let newMsg = {
        webMsgType: 1024,
        funCode: 7,
      };
      newMsg.data = { id: val };
      this.mySpecialId = publishMsg(newMsg);
      sessionStorage.setItem(this.componentsID, val);
      this.optionsData.dynamicData.chartProperties.dataId = val;
      this.loadingShow = true;
    },
    isOptionsData() {
      let isOption = false;
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      if (optionsData.dataType == "dynamicData") {
        if (optionsData.dynamicData.hasOwnProperty("chartProperties")) {
          if (
            optionsData.dynamicData.chartProperties.hasOwnProperty("dataId") &&
            optionsData.dynamicData.chartProperties.hasOwnProperty(
              "dataSetNameId"
            )
          ) {
            isOption = true;
          }
        } else {
          isOption = false;
        }
      }
      return isOption;
    },
    setOptionsData(val) {
      const optionsData = val.data; // 数据类型 静态 or 动态

      if (this.isOptionsData()) {
        let dataSetNameId =
          optionsData.dynamicData.chartProperties.dataSetNameId;
        let dataId = optionsData.dynamicData.chartProperties.dataId;
        if (
          this.formData.dataSetNameId != dataSetNameId &&
          this.formData.dataId != dataId
        ) {
          this.formData.dataSetNameId =
            optionsData.dynamicData.chartProperties.dataSetNameId;
          this.formData.dataId = optionsData.dynamicData.chartProperties.dataId;
          let newMsg = {
            webMsgType: 1024,
            funCode: 7,
          };
          newMsg.data = { id: this.formData.dataId };
          this.mySpecialId = publishMsg(newMsg);
          this.loadingShow = true;
        }
      }
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1024:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                return this.$message.error(msg.retMsg);
              }
              const filteredData = msg.data.filter((item) => item.type === 1);
              this.ReportList = filteredData.map((item) => ({
                id: item.id,
                name: item.name,
              }));
              break;
            case 7:
              if (this.mySpecialId == msg["specialId"]) {
                if (msg.retCode != 0 || !msg.data) {
                  this.$message.error(msg.retMsg);
                } else {
                  let Id =
                    sessionStorage.getItem(this.componentsID) ||
                    this.optionsData.dynamicData.chartProperties.dataId;
                  if (msg.data.id == Id) {
                    if (msg.data.type == 1) {
                      this.formData.id = msg.data.id;
                      this.formData.name = msg.data.name;
                      this.body = msg.data.body;
                      this.header = msg.data.header;
                      this.header.forEach((e) => {
                        if (e.unit) {
                          if (e.name.indexOf(`(${e.unit})`) != -1) {
                            e.name = e.name;
                          } else {
                            e.name = e.name + "(" + e.unit + ")";
                          }
                        }
                      });
                      this.loadingShow = false;
                      //发送报表配置预览
                      let newMsg2 = {
                        webMsgType: 1024,
                        funCode: 8,
                      };
                      newMsg2.data = { id: msg.data.id };
                      this.mySpecialId = publishMsg(newMsg2);
                    }
                  }
                }
              }
              break;
            case 8:
              // if (checkSpecialId) {
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                let Id = this.optionsData.dynamicData.chartProperties.dataId;
                if (msg.data.id == Id || msg.data.type == 1) {
                  this.bodyConfigList = msg.data.body;
                  this.getBodyData = true;
                }
              }
              // }
              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  created() {
    this.initWidgetKey();
  }, //生命周期 - 创建完成
  mounted() {
    // console.log(this.value, "配置配置");
    setMessageCallback(this.onMessage);
    this.options = this.value;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    let newMsg = {
      webMsgType: 1024,
      funCode: 0,
    };
    this.mySpecialId = publishMsg(newMsg);
    if (!this.isOptionsData()) {
      // console.log("没有找到数据id", this.ispreview);
      return this.$message.warning("请选择数据！！");
    } else {
      let newMsg = {
        webMsgType: 1024,
        funCode: 7,
      };
      if (!this.ispreview) {
        sessionStorage.removeItem(this.componentsID);
      } else {
      }
      let Id =
        sessionStorage.getItem(this.componentsID) ||
        this.optionsData.dynamicData.chartProperties.dataId;
      newMsg.data = { id: Id };
      this.mySpecialId = publishMsg(newMsg);
      this.loadingShow = true;
    }
  }, //生命周期 - 挂载完成
  // activated() {
  // }, //如果页面有keep-alive缓存功能，这个函数会触发
  beforeDestroy() {
    this.getBodyData = false;
  },
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
// @import "./css/index.scss";
.head {
  border: none;
  background-color: #0a74ff96;
  ::v-deep .el-select .el-input__inner {
    background-color: transparent;
    border: 1px solid #0099ff;
    color: #fff;
    text-align: center;
  }
  ::v-deep .el-select .el-input__suffix {
    // display: none;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    color: rgb(251, 251, 251);
  }
  ::v-deep .el-select .el-select-dropdown {
    border: 1px solid #fff;
    background-color: transparent;
  }
  ::v-deep .el-select .el-select-dropdown__item {
    color: #fff;
  }
  ::v-deep .el-select .el-select-dropdown__item:hover {
    background-color: transparent;
  }
  ::v-deep .el-input__icon {
    line-height: 30px;
  }
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  .select .el-input__suffix {
    display: none !important;
  }
}
::v-deep .GJ1 {
  animation: blinker 1s linear infinite;
  color: #ff4040;
  font-weight: bold; /*字体颜色为红色*/
}
// @keyframes blinker {
//   /*关键帧动画*/
//   50% {
//     opacity: 0;
//   }
// }
</style>
